<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="form" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'OPERATION.MANUAL_AUTH.TRANS_AMT' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <nz-input-number 
              formControlName="transAmt" name="transAmt" 
              [nzMin]="amtMinValue$ | async" 
              [nzMax]="transAmtMaxValue" 
              [nzPrecision]="decimal$ | async"
              style="width: 100%;">
            </nz-input-number>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('transAmt'), name:'transAmt'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'OPERATION.MANUAL_AUTH.TRANS_CURRENCY' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <app-currency-select [intStoreCode]="collectionData.intStoreCode" formControlName="currency"
              name="currency"></app-currency-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('currency'), name:'currency'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'OPERATION.MANUAL_AUTH.ACCT_NUM' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="acctNum" name="acctNum" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:form.get('acctNum'), name:'acctNum'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'OPERATION.MANUAL_AUTH.EFFECTIVE_DATE' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <nz-month-picker 
              [nzFormat]="'yyMM'" 
              formControlName="effectiveDate" 
              name="effectiveDate"></nz-month-picker>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('effectiveDate'), name:'effectiveDate'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'OPERATION.MANUAL_AUTH.CVV2' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="cvv2" name="cvv2" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('cvv2'), name:'cvv2'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('minlength'); else third">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('maxlength'); else fourth">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('min'); else fifth">{{ errorTips[name]?.min }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('max'); else sixth">{{ errorTips[name]?.max }}</ng-container>
    </ng-template>
    <ng-template #sixth>
      <ng-container *ngIf="control.hasError('pattern')">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>